<template>
  <view class="page-wrap">
    <!-- 地址 -->
    <view class="address-wrap">
      <view v-if="!address" class="btn" @click="chooseAddr"> 选择地址 </view>
      <view class="address" v-else>
        <view class="top">{{ address }}</view>
        <view class="bottom">{{ username }} {{ phone }}</view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list">
      <view class="main-title">已选商品</view>
      <view class="item" v-for="item in productCheck" :key="item.goods_id">
        <image class="img" :src="item.goods_small_logo"></image>
        <view class="info">
          <view class="top u-line-2">
            {{ item.goods_name }}
          </view>
          <view class="bottom">
            <view class="price">¥ {{ item.goods_price }}</view>
            <view class="number">x{{ item.number }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部提交按钮 -->
    <view class="submit-bar">
      <view class="price-wrap">
        合计: <text class="price">¥ {{ totalPrice }}</text>
      </view>
      <view class="btn" :class="{ active: address }" @click="startPay"
        >去支付({{ totalNumber }})</view
      >
    </view>
  </view>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    computed: {
      ...mapGetters(["productCheck", "totalPrice", "totalNumber"]),
    },
    data() {
      return {
        address: "",
        username: "",
        phone: "",
      };
    },
    methods: {
      async startPay() {
        if (!this.address) {
          uni.showToast({
            title: "请先选择地址",
            icon: "none",
          });
        } else {
          // 由于这里比较繁琐, 封装一个函数实现
          await this.payment();
          console.log("支付");
          // 给钱完毕的操作
          // 弹出提示
          uni.showToast({
            title: "支付成功",
          });
          setTimeout(() => {
            // 购物车清理
            this.$store.commit("clearCart");
            // 跳到首页
            uni.switchTab({
              url: "/pages/index/index",
            });
          }, 1000);
        }
      },
      async payment() {
        // 1. 登录获取 Token -------------------------------------
        // 换成action负责发送请求获取token存在vuex里面
        if (!this.$store.state.token) {
          await this.$store.dispatch("login");
        }

        // 2. 订单生成 -------------------------------------
        // 发请求之前根据 api 需求转换数据
        console.log("之前的数据", this.productCheck);
        const goods = this.productCheck.map((item) => {
          return {
            goods_id: item.goods_id,
            goods_number: item.number,
            goods_price: item.goods_price,
          };
        });
        console.log("为了订单改造后", goods);
        // post 请求的函数可以带三个参数 地址, data, 配置
        const { order_number } = await uni.$u.http.post(
          "/my/orders/create",
          {
            order_price: this.totalPrice,
            consignee_addr: this.address,
            goods,
          }
          // {
          //   header: {
          //     Authorization: token,
          //   },
          // }
        );
        console.log(order_number);

        // 3. 支付参数生成 -------------------------------------
        const { pay } = await uni.$u.http.post("/my/orders/req_unifiedorder", {
          order_number,
        });

        console.log("获取到支付参数", pay);

        // 4. 调起微信支付 -------------------------------------
        const [err, res] = await uni.requestPayment(pay);
        console.log("最终支付结果", res);
        if (err) {
          // 停止当前异步promise执行
          uni.showToast({
            title: "支付失败",
            icon: "error",
          });
          return Promise.reject(new Error("支付失败"));
        }
      },
      chooseAddr() {
        uni.chooseAddress({
          // 调用成功后, 只需要将用户的地址数据放入 data
          success: (res) => {
            console.log(res);
            this.address =
              res.provinceName +
              res.cityName +
              res.countyName +
              res.detailInfo +
              res.postalCode;
            this.username = res.userName;
            this.phone = res.telNumber;
          },
          fail(err) {
            console.log("失败了", err);
          },
        });
      },
    },
  };
</script>

.<style lang="scss" scoped>
  .page-wrap {
    background-color: #e9e9e9;
    min-height: 100vh;
    padding-top: 20rpx;
    // 地址栏部分
    .address-wrap {
      height: 187rpx;
      margin: 0 20rpx;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 303rpx;
        line-height: 89rpx;
        border-radius: 45rpx;
        border: 4rpx solid #eb4450;
        text-align: center;
        color: #eb4450;
      }
      .address {
        color: #434343;
        color: #434343;
        height: 70%;
        width: 80%;
        .top {
          font-size: 30rpx;
        }
        .bottom {
          font-size: 26rpx;
          margin-top: 30rpx;
        }
      }
    }
    // 商品列表部分
    .list {
      margin: 20rpx;
      background-color: #fff;
      padding: 17rpx 15rpx 83rpx;
      .main-title {
        font-size: 26rpx;
        color: #434343;
      }
      .item {
        display: flex;
        margin: 20rpx 0;
        .img {
          height: 191rpx;
          width: 191rpx;
          flex-shrink: 0;
        }
        .info {
          flex: 1;
          color: #434343;
          font-size: 24rpx;
          padding: 10rpx 0 10rpx 29rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .bottom {
            display: flex;
            justify-content: space-between;
            .price {
              color: #ea4350;
            }
          }
        }
      }
    }
    .submit-bar {
      position: fixed;
      left: 0;
      bottom: 0;
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 83rpx;
      border-top: 1rpx solid #e9e9e9;
      font-size: 26rpx;
      padding: 0 28rpx;
      box-sizing: border-box;
      .price {
        color: #ea4350;
        margin-left: 20rpx;
      }
      .btn {
        background-color: #a9a9a9;
        color: #fff;
        line-height: 52rpx;
        padding: 0 26rpx;
        border-radius: 26rpx;
      }
      .active {
        background-color: #eb4450;
      }
    }
  }
</style>